<script setup lang="ts">
import type{ Ref } from 'vue';
import { ref } from 'vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const show = ref(false);
const router =useRouter()
const value=ref('')
const value1=ref('')
const flag = computed(() => {
    return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value1.value) != true||Number(value.value) <=6
})
const checked=ref(true)
function loginClick(){
    let  values=localStorage.getItem('login')||''
    let newvalues=JSON.parse(values)

   
    for (let i = 0; i < newvalues.length; i++) {
        console.log(newvalues[i].tel);
        
       if(value1.value==newvalues[i].tel||value.value==newvalues[i].password){
        console.log('登陆成功');
        localStorage.setItem('usermessage',JSON.stringify(newvalues[i]))
        router.push('/')
       }else{
        console.log('登陆失败，请检查手机号和密码')
       }
        
    }
}
</script>
<template>
    <main class="box">
      <header class="header">
          <slot name="left"></slot>
          <span>登录</span>
          <slot name="right"></slot>
      </header>
    <div class="content"> 
     <div class="loginbox">
        <van-cell-group inset>
  <van-field
    v-model="value1"
    
    left-icon="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E7%99%BB%E5%BD%95/u78.png"
    placeholder="输入手机号码"
     class="tel"
  />
  
  <van-field
    v-model="value"
    
    left-icon="lock"
    placeholder="输入密码"
    class="password"
     @touchstart.stop="show = true"
  ><template  #button>
    <van-switch v-model="checked" />
  </template></van-field>
</van-cell-group>
<div class="alogin"><span @click="router.push('/register')" class="registeer">注册</span> <span @click="router.push('/forget')" class="forget">忘记密码</span></div>
<button class="login" :disabled="flag" @click="loginClick">登录</button>
<van-number-keyboard
  :show="show"
  @blur="show = false"
   v-model="value"
/>

  </div>
    </div>
    </main>
</template>

<style lang="scss" scoped>

    .header{
        background-color: rgba(0,0,0,0);
        color: black;
    }
    .loginbox{
        width: 100%;
        height: 100%;
        background-image: url("https://img95.699pic.com/xsj/0o/q1/yf.jpg%21/fh/300");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0.7;
        position: absolute;
        top: 0;
        left: 0;
    }
    .tel{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 2rem;
        border-radius: 10px;
    }
    .password{
        position: absolute;
        width: 90%;
        height: 50px;
        left: 5%;
        top: 2.6rem;
        border-radius: 10px;
    }
    .alogin{
        width: 90%;

        position: absolute;
        left: 5%;
        top: 3.2rem;
        .registeer{
            float: left;
            color: white;
            font-size: 16px;
            text-decoration: underline;
        }
        .forget{
            float: right;
            color: white;
            font-size: 16px;
            text-decoration: underline;
        }
      
    }
    .login{
            position: absolute;
        width: 90%;
        background-color: #4a73ff;
        height: 56px;
        left: 5%;
        top: 3.6rem;
        border-radius: 10px;
        color: white;
        font-size: 20px;
        }
    </style>
    